<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item index="0">
      <img src="./logo.png" style="width: 300px ">
    </el-menu-item>
    <div class="flex-grow"/>
    <el-menu-item index="1"><span
        style="color: #16285f;font-weight: bold;font-size: 18px;font-family: 'Microsoft YaHei',serif">管理员端</span>
    </el-menu-item>
    <router-link to="/login">
      <el-menu-item index="2"
                    style="color: #16285f;font-weight: bold;font-size: 18px;font-family: 'Microsoft YaHei',serif">退出
      </el-menu-item>
    </router-link>
  </el-menu>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
.router-link-active {
  text-decoration: none;
  color: #00CC7E;
}
a{
  text-decoration: none;
}
</style>